<template>
  <div class="work_info">
    <van-nav-bar
        left-arrow
        @click-left="handleClickLeft"
        :title="$t('工作信息')"
    >
    </van-nav-bar>
    <div class="tab_progress">
      <span style="vertical-align: middle;background-color: #FFE1AD;padding: 10px;border-radius: 20px">Step 2</span>
    </div>
    <!--     身份信息-->
    <div class="wrapper">
      <div class="cell_content_list">
        <!--      行业类型-->
        <div class="cell_content_item" @click="industryTypeClick" v-if="resourcesShow['workingLife'] === 1">
          <div class="text">
            {{ $t('行业类型') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(1)" v-model="industryTypeText" :readonly="true"
                   :placeholder="$t('请选择行业类型')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--      工作类型-->
        <div class="cell_content_item" @click="workModeClick">
          <div class="text">
            {{ $t('工作类型') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(2)" v-model="workModeText" :readonly="true" :placeholder="$t('请选择工作类型')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--      工作年限-->
        <div class="cell_content_item" @click="workAgeClick">
          <div class="text">
            {{ $t('工作年限') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(3)" v-model="workAgeText" :readonly="true" :placeholder="$t('请选择工作年限')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--      发薪周期-->
        <div class="cell_content_item" @click="salaryCycleClick">
          <div class="text">
            {{ $t('发薪周期') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(4)" v-model="salaryCycleText" :readonly="true" :placeholder="$t('请选择发薪周期')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--     发薪日-->
        <div class="cell_content_item" @click="selectPaySalary()" v-if="resourcesShow['payday'] === 1">
          <div class="text">
            {{ $t('发薪日') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(5)" v-model="payday" :readonly="true"
                   :placeholder=" $t('请选择发薪日')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--      公司地址-->
        <div class="cell_content_item" @click="addressClick" v-if="resourcesShow['companyDetailedAddress'] === 1">
          <div class="text">
            {{ $t('公司地址') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(6)" v-model="companyDetailedAddress" :readonly="true"
                   :placeholder="$t('请输入')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--        公司名称-->
        <div class="cell_content_item" v-if="resourcesShow['corporateName'] === 1">
          <div class="text">
            {{ $t('公司名称') }}
          </div>
          <input class="input" @blur="confirmPoint(7)" v-model="corporateName"
                 :placeholder="$t('请输入公司名称')"/>
        </div>
        <!--        公司电话-->
        <div class="cell_content_item" v-if="resourcesShow['workTelephone'] === 1">
          <div class="text">
            {{ $t('公司电话') }}
          </div>
          <input class="input" v-model="workTelephone" type="tel"
                 @blur="confirmPoint(8)"
                 :placeholder="$t('请输入公司电话')"/>
        </div>
        <!--      每月净收入-->
        <div class="cell_content_item" v-if="resourcesShow['monthlyIncome'] === 1">
          <div class="text">
            {{ $t('每月净收入') }}
          </div>
          <input class="input"
                 @blur="confirmPoint(9)"
                 v-model="monthlyIncome" type="tel"
                 :placeholder="$t('每月净收入')"/>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin: 30px 0 ;">
      <van-button class="confirm" type="primary" @click="confirm" round>{{ $t('下一步') }}</van-button>
    </div>
    <!--        行业类型选择面板-->
    <van-action-sheet v-model:show="industryTypeShow">
      <van-picker @confirm="industryTypeConfirm" @cancel="industryTypeShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="industryTypeColumns"/>
    </van-action-sheet>

    <!--       工作类型选择-->
    <van-action-sheet v-model:show="workModeShow">
      <van-picker @confirm="workModeConfirm" @cancel="workModeShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="workModeColumns"/>
    </van-action-sheet>
    <!--       工作年限选择-->
    <van-action-sheet v-model:show="workAgeShow">
      <van-picker @confirm="workAgeConfirm" @cancel="workAgeShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="workAgeColumns"/>
    </van-action-sheet>
    <!--       发薪周期选择-->
    <van-action-sheet v-model:show="salaryCycleShow">
      <van-picker @confirm="salaryCycleConfirm" @cancel="salaryCycleShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="salaryCycleColumns"/>
    </van-action-sheet>
    <!--        地址下拉选择-->
    <van-action-sheet v-model:show="addressShow">
      <div class="address_header">
        <div class="operation">
          <div class="cancel" @click="addressShow = false">{{ $t('取消') }}</div>
          <div class="confirm_text" @click="addressConfirm">{{ $t('提交') }}</div>
        </div>
        <div class="input">
          <input v-model="detailsAddress" :placeholder="$t('详细地址')"/>
        </div>
      </div>
      <van-cascader
          v-model="addressValue"
          :options="addressColumns"
          :closeable="false"
          :field-names="{
                  text: 'name',
                  value: 'id',
                  children: 'children',
              }"
          @change="addressChange"
          @finish="addressFinish"
      />
    </van-action-sheet>
    <van-popup v-model:show="dialogRetentionShow">
      <template #default>
        <div class="dialog_body">
          <div class="content_text">Application is successful immediately
            <p class="active">Get your money instantly in just 2 steps</p>
            Do you really want to quit?
          </div>
          <div style="margin-top: 20px;text-align: center">
            <van-button type="primary" style="width: 80%" round @click="dialogRetentionShow = false">{{ $t('继续申请') }}</van-button>
            <van-button class="reject_btn" round @click="$router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')">
              {{ $t('残忍拒绝') }}
            </van-button>
          </div>
        </div>
      </template>
    </van-popup>
    <!--      选择发薪日-->
    <van-action-sheet v-model:show="salaryDateShow">
      <van-picker @confirm="salaryDateConfirm" @cancel="salaryDateShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="salaryDateColumns"/>
    </van-action-sheet>

  </div>
</template>

<script>
import {ref, toRefs, reactive, onMounted} from 'vue'
import {useI18n} from 'vue-i18n'
import {Dialog, Toast} from 'vant'
import {personalInfoSelect, selectCitys, saveWorkInfo} from '@/api/home'
import {debounce, setResourcesShow, processNext, upLoadAdjustPoint} from '@/utils/tool'
import {useStore} from "vuex";
import router from "@/router";
import {upLoadInputPoint, upLoadPoint} from "@/api/my";

const salaryDateColumns = []
for (let i = 0; i <= 30; i++) {
  salaryDateColumns.push(i + 1)
}

export default {
  setup() {
    const {tm, t} = useI18n()
    const store = useStore()
    const resourcesShow = ref({})
    const currentDate = ref(new Date())
    const dialogRetentionShow = ref(false)
    // 所有下拉
    let allSelectData = ref([])
    const salaryDateShow = ref(false)
    let workInfo = reactive({
      corporateName: '',
      workTelephone: '',
      companyDetailedAddress: '',
      industry: '',
      workingLife: '',
      payrollCycle: '',
      payday: null,
      monthlyIncome: null
    })

    const getCitySelect = async (value) => {
      const res = await selectCitys({pid: value})
      if (res.code === 1) {
        return res.data
      }
    }
    // 选择地址
    let addressSheet = reactive({
      addressShow: false,
      addressColumns: [],
      detailsAddress: '',
      addressValue: '',
      addressFinishText: '',
      addressConfirm: () => {
        let {addressFinishText, detailsAddress} = addressSheet
        if (addressSheet.detailsAddress.length < 5) return Toast({message: t('详细地址不能少于5位')})
        workInfo.companyDetailedAddress = addressFinishText + ' - ' + detailsAddress
        addressSheet.addressShow = false
      },
      addressClick: async () => {
        addressSheet.addressColumns = await getCitySelect(0)
        addressSheet.addressShow = true
      },
      addressChange: async ({value}) => {
        const filterList = async (data) => {
          for (let i = 0; i < data.length; i++) {
            if (data[i].children && data[i].children.length) {
              filterList(data[i].children)
            }
            if (value === data[i].id) {
              const list = await getCitySelect(value)
              if (list.length !== 0) {
                data[i].children = list
              }
              return
            }
          }
        }
        filterList(addressSheet.addressColumns)
      },
      addressFinish: ({selectedOptions}) => {
        addressSheet.addressFinishText = selectedOptions.map((option) => option.name).join(' - ');
      }
    })
    // 行业类型
    let industryTypeSheet = reactive({
      industryTypeShow: false,
      industryTypeText: '',
      industryTypeColumns: [],
      industryTypeConfirm: (value) => {
        industryTypeSheet.industryTypeText = value.value
        workInfo.industry = value.key
        industryTypeSheet.industryTypeShow = false
      },
      industryTypeClick: () => {
        industryTypeSheet.industryTypeShow = true
        industryTypeSheet.industryTypeColumns = allSelectData.value.filter(item => item.type === 6)
      }
    })
    // 工作类型
    let workModeSheet = reactive({
      workModeShow: false,
      workModeText: '',
      workModeColumns: [],
      workModeClick: () => {
        workModeSheet.workModeShow = true
        workModeSheet.workModeColumns = allSelectData.value.filter(item => item.type === 4)
      },
      workModeConfirm: ({value, key}) => {
        workInfo.workingLife = key
        workModeSheet.workModeText = value
        workModeSheet.workModeShow = false
      }
    })
    // 工作年限
    let workAgeSheet = reactive({
      workAgeShow: false,
      workAgeText: '',
      workAgeColumns: [],
      workAgeClick: () => {
        workAgeSheet.workAgeShow = true
        workAgeSheet.workAgeColumns = allSelectData.value.filter(item => item.type === 16)
      },
      workAgeConfirm: ({value, key}) => {
        workInfo.workingYears = key
        workAgeSheet.workAgeText = value
        workAgeSheet.workAgeShow = false
      }
    })
    // 发薪周期
    let salaryCycleSheet = reactive({
      salaryCycleShow: false,
      salaryCycleText: '',
      salaryCycleColumns: [],
      salaryCycleClick: () => {
        salaryCycleSheet.salaryCycleShow = true
        salaryCycleSheet.salaryCycleColumns = allSelectData.value.filter(item => item.type === 17)
      },
      salaryCycleConfirm: ({value, key}) => {
        workInfo.payrollCycle = key
        salaryCycleSheet.salaryCycleText = value
        salaryCycleSheet.salaryCycleShow = false
      }
    })
    const verificationInfo = () => {
      let message = ''
      if (!workInfo.industry && resourcesShow.value['workingLife'] === 1) return message = t('请选择行业类型')
      if (!workInfo.workingLife && resourcesShow.value['workingLife'] === 1) return message = t('请选择工作类型')
      if (!workInfo.workingYears && resourcesShow.value['workingLife'] === 1) return message = t('请选择工作年限')
      if (!workInfo.payrollCycle && resourcesShow.value['workingLife'] === 1) return message = t('请选择发薪周期')
      if (!workInfo.payday && resourcesShow.value['payday'] === 1) return message = t('请选择发薪日')
      if (!workInfo.companyDetailedAddress && resourcesShow.value['companyDetailedAddress'] === 1) return message = t('请选择公司地址')
      if (!workInfo.corporateName && resourcesShow.value['corporateName'] === 1) return message = t('请输入公司名称')
      if (!workInfo.workTelephone && resourcesShow.value['workTelephone'] === 1) return message = t('请输入公司电话')
      if (!workInfo.monthlyIncome && resourcesShow.value['monthlyIncome'] === 1) return message = t('请输入每月净收入')
      return message
    }
    const confirm = debounce(
        async () => {
          console.log(workInfo)
          if (!verificationInfo()) {
            const res = await saveWorkInfo(workInfo)
            if (res.code === 1) {
              Toast({
                message: t('提交成功')
              })
              confirmPoint(0)
              processNext('workInfo')
              upLoadAdjustPoint({eventName:'fukf0y'})
            } else {
              Toast({
                message: res.message
              })
            }
          } else {
            upLoadPoint({type: 11})
            Toast({
              message: verificationInfo()
            })
          }
        }
    )
    //获取所有下拉
    const getSelect = async () => {
      const res = await personalInfoSelect()
      allSelectData.value = res.data
    }
    // 流程显示隐藏
    const getResourcesShow = async () => {
      resourcesShow.value = await setResourcesShow(3)
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    const salaryDateConfirm = (value) => {
      workInfo.payday = value
      salaryDateShow.value = false
    }
    // 选择发薪日
    const selectPaySalary = () => {
      salaryDateShow.value = true
    }
    function handleClickLeft() {
      upLoadPoint({type: 10})
      dialogRetentionShow.value  = true
    }
    // 提交埋点数据
    function confirmPoint(detailType) {
      upLoadInputPoint({
        type: 2,
        detailType: detailType
      })
    }
    onMounted(()=>{
      getResourcesShow()
      getSelect()
    })
    return {
      ...toRefs(industryTypeSheet),
      ...toRefs(addressSheet),
      ...toRefs(workInfo),
      ...toRefs(workModeSheet),
      ...toRefs(workAgeSheet),
      ...toRefs(salaryCycleSheet),
      confirmPoint,
      handleClickLeft,
      salaryDateConfirm,
      selectPaySalary,
      salaryDateShow,
      dialogRetentionShow,
      salaryDateColumns,
      resourcesShow,
      currentDate,
      allSelectData,
      confirm
    }
  },
}
</script>

<style scoped lang="less">
.overlay_title {
  font-size: 12px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  text-align: center;
  padding: 5px 0
}

.work_info {
  overflow: auto;

  ::v-deep .van-cascader__header {
    display: none;
  }

  .address_header {
    font-size: 16px;
    padding: 15px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    .operation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .confirm_text {
        color: #FF7805;
      }
    }

    .input {
      margin-top: 10px;
      width: 100%;

      input {
        box-sizing: border-box;
        width: 100%;
        height: 35px;
        border-radius: 3px;
        padding: 5px 10px;
        outline: none;
        border: solid 1px #FF7805;
      }
    }
  }

  .wrapper {
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding: 15px 0;

    .wrapper_title {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #FFC09C;
      display: inline-block;
      border-radius: 0 20px 20px 0;
      margin-bottom: 15px;
    }
  }


  .work_box {
    box-sizing: border-box;
    margin-top: 20px;
    background-color: #ffffff;
  }

}
</style>
